<template>
	<div>
        <!--头部-->
		<header class="customHeaderStyle">
			<div class="go-back" @click="goBack">
				<i></i>
				<i></i>
				<i></i>
			</div>
			<div class="headerCustomTitle">商品信息</div>
		</header>
		<div style="height:2rem;"></div>
		<div class="centent">
			<!--商品列表-->
			<div class="aui-content">
				<ul class="aui-list aui-media-list commodity_list subtotal_list">
					<li class="aui-list-item baoguo-title">
						<div class="aui-list-item-inner" style="text-align: left;">
							包裹1
							<div class="aui-pull-right text_c_gray" >共<span>{{num}}</span>件</div>
						</div>
					</li>
					<li class="aui-list-item baoguo-list-item baoguo-root" v-for="item in dataList">
						<div class="aui-media-list-item-inner">
							<div class="aui-list-item-media">
								<img :src="goodsImg(item)" alt="" />
							</div>
							<div class="aui-list-item-inner suggest" style="text-align: left;">
								<h3>{{item.goodsName}}</h3>
								<p>规格：{{item.goodsspec}}</p>
								<p>单价：￥{{item.goodsPrice.toFixed(2)}}/{{item.goodsunit}}</p>
							</div>
							<div class="subtotal">
								<span>￥{{item.goodsPrice}}</span>
								<p>{{item.goodsNum}}/{{item.goodsunit}}</p>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<!--商品列表 end-->
		</div>
	</div>

</template>

<script>

import {mapGetters,mapMutations} from "vuex";
import axios from "axios";
	export default {
	  	name: 'hello',
	  	data () {
	    	return {
				msg: '这是新增地址页面',
	            page: "CommodityInformation",
	            componentName: "CommodityInformation",
	            dataList: [],
	            num:null
			}
		},
		computed: {
			
			pageTree () {
				return getPageTree(this, this.page);
			}
		},
		components: {
	       
	    },
	    methods: {
	    	getDateList(){
	    		this.dataList = this.$store.state.cjy.checkedCartList;
	    		console.log(this.dataList,'this.dataList');
	    	},
	    	goBack(){
	    		window.history.back()
	    	},
	    	goodsImg(goodsItemData) {
	            if (goodsItemData && goodsItemData.urllist) {
	                if(goodsItemData.urllist[0].imgurl) {
	                    return goodsItemData.urllist[0].imgurl;
	                } else {
	                    return "static/image/demo1.png";
	                }
	            } else {
	                return "static/image/demo1.png";
	            }
	        },
	        goodsNum() {
	        	if(this.dataList.length != 0){
	        		for(let i = 0 ; i < this.dataList.length; i++){
		            	this.num += this.dataList[i].goodsNum;	
		           } 
	        	}
	           
	        },
	    },
		created () {
			this.getDateList();
			this.goodsNum();
		},
		mounted () {
			// initDomTree(this.getDomTree[this.page]);
			
		},
		updated() {
			//页面更新完毕
			// initDomTree(this.getDomTree[this.page]);
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.customHeaderStyle{
		position: relative;
		background: #fff;
		min-height: 3rem;
		border-bottom: 1px solid #eaeaea;
		color: #444;
		font-weight: 700;
		left: 0;
		top: 0;
		line-height: 2.25rem;
		/* z-index: 2; */
		width: 100%;
		font-size: .9rem;
		text-align: center;
		margin: 0;
		padding: 0;
	}
	.headerCustomTitle{
		overflow: hidden;
		right: 6rem;
		font-weight: 500;
		min-height: 2.25rem;
		position: absolute;
		margin: 0;
		text-align: left;
		white-space: nowrap;
		left: 3rem;
		width: auto;
		text-overflow: ellipsis;
		z-index: 2;
		font-size: 1.1rem;
		margin-top: .35rem;
		top: 1px;
	}
	.aui-searchbar, .aui-bar-nav {
		position: static;
	    left: 0;
	    top: 0;
	    z-index: 12;
	}
	.subtotal_list .aui-list-item-media {
	    width: 10vw;
	    height: 10vw;
	}
</style>